<template>
    <nav>
        <div class="nav-flex-1">
            <van-icon @click="revTo" name="arrow-left" />
            <h3>限时折扣</h3>
        </div>
        <div class="nav-tabs">
            <div @click="changeCurIndex(index-1)" :class="{'nav-tab':true, curSelect:curIndex==index-1}" v-for="index in [1,2,3,4,5]" :key="index">
                <p>7月8日</p>
                <p><strong style="font-size:4vw;">20:00</strong></p>
                <p>进行中</p>
            </div>
        </div>
    </nav>
    <section>
        <div class="shopBox" v-for="item in imgSrc" :key="item">
            <div>
                <img :src="item['src']" alt="">
            </div>
            <div class="shopBox-flex">
                <div class="shopBox-flex-top">
                    <p>伺机待发辽宁科技</p>
                    <p>2323收藏</p>
                </div>
                <div class="shopBox-flex-bottom">
                    <p><strong style="color:#d1082a;">￥523.6</strong><span>未开始</span></p>
                    <del style="color:#999999;">￥2333.0</del>
                </div>
            </div>
        </div>
        <h3>没有更多了哦~</h3>
    </section>
</template>
<script setup lang="ts">
    import {getShopList,getCarousImgs} from "@/servers/homeServer"
    import { onMounted, ref } from "vue"

    let curIndex = ref(0)
    let changeCurIndex = (val:number)=>{
        curIndex.value = val
    }

    let revTo = ()=>{
        window.history.go(-1);
    }

    let imgSrc = ref([])
    onMounted(()=>{
        getShopList()
        .then((res:any)=>{
            imgSrc.value= res.data
            console.log(imgSrc.value);
        })
    })
</script>
<style lang="scss" scoped>
    *{
       margin: 0;
        padding: 0;
    } 
    // nav{
    //     position: fixed;
    //     width: 100%;
    //     .nav-flex-1{
    //         padding: 1rem;
    //         background: #eae9e5;
    //         .van-icon{
    //             float: left;
    //             font-size: 1.2rem;
    //             color: #c1ab96;
    //             line-height: 2rem;
    //         }
    //         h3{
    //             text-align: center;
    //         }
    //     }
    //     .nav-tabs{
    //         background: #c1ab96;
    //         display: flex;
    //         .nav-tab{
    //             width: 20%;
    //             text-align: center;
    //             p{
    //                 font-size: 14px;
    //             }
    //         }
    //         .curSelect{
    //             background: #d1082a;
    //             color: white;
    //         }
    //     }
    // }
    // section{
    //     padding: 0 1rem;
    //     padding-top: calc(121px + 1rem);
    //     .shopBox{
    //         height: 120px;
    //         width: 100%;
    //         box-shadow: 0 0 10px 2px #cfcfcf;
    //         // background: #c1ab96;
    //         border-radius: 0.6rem;
    //         display: flex;
    //         margin-bottom: 1rem;
    //         overflow: hidden;
    //         .shopBox-flex{
    //             padding: 5px;
    //             width: calc(100% - 8rem);
    //             height: 100%;
    //             .shopBox-flex-top{
    //                 height: 56%;
    //                 p{
    //                     padding: 0.3rem 0;
    //                 }
    //             }
    //             .shopBox-flex-bottom{
    //                 p{
    //                     display: flex;
    //                     justify-content: space-between;
    //                     span{
    //                         padding: 0 0.5rem;
    //                         background: #c1ab96;
    //                         font-size: 12px;
    //                         color: white;
    //                         line-height: 22px;
    //                         height: 22px;
    //                         border-radius: 3px;
    //                         margin-top: 5px;
    //                     }
    //                 }
    //             }
    //         }
    //         img{
    //             height: 100%;
    //             width: 120px;
    //             background: #c1ab96;
    //         }
    //     }
    //     h3{
    //         color: #8e7e6f;
    //         width: 100%;
    //         margin: 10px 0;

    //         text-align: center;
    //     }
    // }
    nav{
        position: fixed;
        width: 100%;
        .nav-flex-1{
            padding: 3vw;
            background: #eae9e5;
            .van-icon{
                float: left;
                font-size: 5vw;
                color: #c1ab96;
                line-height: 9vw;
            }
            h3{
                text-align: center;
                font-size: 5vw;
                line-height: 9vw;
            }
        }
        .nav-tabs{
            background: #c1ab96;
            display: flex;
            .nav-tab{
                width: 20%;
                padding: 2vw 0;
                text-align: center;
                p{
                    // padding: ;
                    font-size: 3vw;
                }
            }
            .curSelect{
                background: #d1082a;
                color: white;
            }
        }
    }
    section{
        padding: 0 2vw;
        padding-top: 35vw;
        .shopBox{
            // height: 120px;
            height: 30vw;
            width: 100%;
            box-shadow: 0 0 .5vw .3vw #cfcfcf;
            // background: #c1ab96;
            border-radius: .5vw;
            display: flex;
            margin-bottom: 3vw;
            overflow: hidden;
            .shopBox-flex{
                padding: .5vw 3vw;
                width: calc(100% - 8vw);
                height: 100%;
                .shopBox-flex-top{
                    height: 58%;
                    p{
                        padding: .3vw 0;
                        font-size: 3vw;
                    }
                }
                .shopBox-flex-bottom{
                    p{
                        display: flex;
                        justify-content: space-between;
                        span{
                            padding: .8vw .8vw;
                            background: #c1ab96;
                            font-size: 2vw;
                            color: white;
                            line-height: 4vw;
                            // height: 22px;
                            border-radius: .5vw;
                            margin-top: .5vw;
                        }
                        strong{
                            font-size: 3vw;
                        }
                    }
                    del{
                        font-size: 3vw;
                    }
                }
            }
            img{
                height: 30vw;
                width: 30vw;
                background: #c1ab96;
            }
        }
        h3{
            color: #8e7e6f;
            width: 100%;
            margin: 10px 0;
            font-size: 4vw;
            text-align: center;
        }
    }
</style>